import React from "react";
import { Layout, Menu, Dropdown} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DownOutlined
} from '@ant-design/icons';



import "./css/Dashboard.css";

import asyncImport from '@/routes/asyncImportComp';

import {withRouter,Redirect,Switch, Route} from "react-router-dom";
import {removeToken,getToken} from "@/axios/auth";
import {removeUserInfo} from "@/redux/user.redux";
//获取routers
import {localRoutes} from "@/routes/index";
import {connect} from "react-redux";

//引入组件
import RSubMenu from "./layout/submenu";

const { Header, Sider, Content } = Layout;


let routes=[...localRoutes];
let withLayoutRouters=routes.filter((obj)=>obj.layout==="dashboard"   );
let noLayoutRouters=routes.filter((obj)=>obj.layout===null);

@connect(state=>state.User,
  {removeUserInfo}
)
@withRouter
class Dashboard extends React.Component{
  constructor(props) {
    super(props);
     this.state={
      collapsed: false
    };

    this.setDropMenu=this.setDropMenu.bind(this);
    this.toggle=this.toggle.bind(this);
    this.logout=this.logout.bind(this);
    this.combineRoutes=this.combineRoutes.bind(this);
  }



  toggle() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  logout(e){
    e.preventDefault();
    removeToken();
    this.props.removeUserInfo();
    this.props.history.push('/login');

  }
  setDropMenu(){
    return (
      <Menu>
        <Menu.Item key="0">
          <a href="" onClick={e=>this.logout(e)}>LOGOUT</a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="1">
          <a href="http://www.govickyv.com">我的主页</a>
        </Menu.Item>
      </Menu>
    )
  }

  setRoute(item,index){
    let {path,component}=item;
    return (
      // <Route key={index} exact path={path} component={asyncImport(component)}/>
      <Route key={index} exact path={path} component={asyncImport(()=>import(`@/container${component}`))} />
    );
  }


  setLayout(){

    let tempRouterArr=[];
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <RSubMenu withLayoutRouters={withLayoutRouters}/>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
            <Dropdown className="Dropdown" overlay={this.setDropMenu} trigger={['click']}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                {this.props.user} <DownOutlined />
              </a>
            </Dropdown>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >

            <Switch>
              {

                withLayoutRouters.map((item,index)=>{
                  tempRouterArr=[];
                  item["children"].map((ki,j)=>{
                    let k=index+"-"+j;
                    tempRouterArr.push(this.setRoute(ki,k));
                    return k;
                  })
                  return tempRouterArr;
                })
              }

            </Switch>

          </Content>
        </Layout>
      </Layout>
    );
  }
  setNoLayout(){
    let tempRouterArr=[];
    return (
      <Switch>
        {
          noLayoutRouters.map((item,index)=>{
            tempRouterArr=[];
            item["children"].map((ki,j)=>{
              let k=index+"-"+j;
              tempRouterArr.push(this.setRoute(ki,k));
              return k;
            })
            return tempRouterArr;
          })
        }

      </Switch>
    )
  }
  hasLayout(){
    let hf=false;
    let path=this.props.location.pathname;
    let childrenList=null;
    withLayoutRouters.map((item,index)=>{
      childrenList=item["children"];
      if(childrenList.filter(ci=>ci["path"]===path).length>0){
        hf=true;
      }
      return index;
    });

    return hf;
  }

  combineRoutes(){
    if(this.props.dynamicRoutes){
      routes=[...localRoutes,...this.props.dynamicRoutes];
      console.log(JSON.stringify(this.props.dynamicRoutes));
      withLayoutRouters=routes.filter((obj)=>obj.layout==="dashboard"   );
      noLayoutRouters=routes.filter((obj)=>obj.layout===null)
    }
  }

  render() {
    this.combineRoutes();
    if(getToken()){
      if(this.hasLayout())  return this.setLayout();
      return this.setNoLayout();
    }
    return (<Redirect to="/login"/>);
  }
}

export default Dashboard;
